﻿@page "/editors"

<h3>Editor 富文本框</h3>

<h4>将输入的文字转化为 <code>html</code> 代码片段</h4>

<p><code>Editor</code> 组件是依赖 <a href="https://summernote.org/" target="_blank"><code>Summernote.js</code></a> 组件库的，所以使用本组件时需要事先应用相应的 <code>css</code> 与 <code>js</code> 文件</p>

<h4>CSS 文件</h4>
<Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css"&gt;
</Pre>

<h4>JS 文件</h4>
<Pre>&lt;script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"&gt;&lt;/script&gt;
&lt;script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"&gt;&lt;/script&gt;
</Pre>

<Block Title="基础用法" Introduction="默认呈现为 <code>div</code> 点击后变为富文本编辑框" CodeFile="editor.1.html">
    <p>通过设置 <code>IsEditor</code> 属性值来控制组件默认是 <code>div</code> 还是 <code>editor</code></p>
    <div class="form-control mb-3">我是一个普通的 <code>div</code> 点击无法编辑</div>
    <Editor></Editor>
</Block>

<Block Title="自定义提示信息" Introduction="通过设置 <code>Placeholder</code> 属性来设置空值时的提示消息" CodeFile="editor.2.html">
    <p>默认提示是 <b>点击后进行编辑</b></p>
    <Editor Placeholder="自定义空值的提示信息"></Editor>
</Block>

<Block Title="默认显示为富文本编辑框" Introduction="通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框" CodeFile="editor.3.html">
    <Editor IsEditor="true"></Editor>
</Block>

<Block Title="自定义高度" Introduction="通过设置 <code>Height</code> 属性来设置组件高度" CodeFile="editor.4.html">
    <Editor IsEditor="true" Height="400"></Editor>
</Block>

<Block Title="双向绑定" Introduction="实战中通过双向绑定到 <code>Value</code> 后台自动获取到客户端富文本框编辑内容" CodeFile="editor.5.html">
    <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定，编辑框内进行编辑后点击 <b>完成</b> 按钮，下方文本框内即可显示编辑后结果</p>
    <Editor @bind-Value="@EditorValue"></Editor>

    <label class="control-label mt-3">显示编辑内容：</label>
    <textarea class="form-control mt-3">@EditorValue</textarea>
    <div class="mt-3">
        <Button @onclick="SetValue">Reset</Button>
    </div>
</Block>
<AttributeTable Items="@GetAttributes()" />
@code{
    public void SetValue()
    {
        EditorValue = "更改后的值";
    }
}